<template>
  <div class="box">
    <h2>Son1子组件</h2>
    从vuex中获取数据：<span>{{count}}</span><br>
    <button @click="handleAdd">值+1</button>
    <button @click="hdChangeCount">原生--三秒后修改count为666</button>
    <hr>
    <div>{{ $store.state.list }}</div>
    <hr>
    <div>{{ $store.getters.filterList }}</div>
    <hr>
    <div>测试访问模块中的数据，原生写法</div>
    <div>{{$store.state.user.userinfo.name}}- {{$store.state.user.userinfo.address}} </div>
    <div>{{ $store.state.settings.sets.theme }}-{{ $store.state.settings.current }}</div>
    <hr>
    <button @click="updUserinfo">修改个人信息</button>
    <button @click="actionUpdUserinfo">三秒后修改个人信息</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Son1Com',
  computed: {
    ...mapState(['count'])
  },
  methods: {
    handleAdd () {
      this.$store.commit('optCount', ['+', 1])
    },
    hdChangeCount () {
      this.$store.dispatch('changeCountAction', 666)
    },
    updUserinfo () {
      this.$store.commit('user/setUser', { userinfo: { name: 'Jack', age: 32, gender: 0, address: '河北省邯郸市磁县' }, score: 90 })
    },
    actionUpdUserinfo () {
      this.$store.dispatch('user/setUserAction', { userinfo: { name: 'Lilay', age: 55, gender: 0, address: '韩国首尔唐山道' }, score: 333 })
    }
  }
}
</script>

<style scoped>
.box {
  width: 300px;

  border: 1px solid red;
}
</style>
